<!DOCTYPE html>
<html lang="en" style="width: 99vw">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <script src="/elementUI/index.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <script src="/js/axios.min.js"></script>
    <style type="text/css">
        body {
            scroll: "no";
            scroll: "auto";
            overflow-x: hidden;
            overflow-y: hidden;
        }
        
        html {
            scroll: "no";
            scroll: "auto";
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>



</head>

<body scroll="no">
    <div id="app">
        <el-row :gutter="20">
            <el-breadcrumb style="font-size: 30px;margin-left: 10px">
                <el-breadcrumb-item>日志列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-divider></el-divider>
        <div style="width:700px;display: inline-block">
            <el-col :span="6">
                <el-input placeholder="用户名称" v-model="username" class="input-with-select" prefix-icon="el-icon-search">
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="权限地址" v-model="url" class="input-with-select" prefix-icon="el-icon-search">
                </el-input>
            </el-col>
            &nbsp;
            <el-button type="primary" slot="append" icon="el-icon-search" @click="selectLike">查询</el-button>
        </div>

        <br><br>

        <el-row :gutter="20">
            <el-table ref="multipleTable" :data="tableData">

                <el-table-column prop="id" label="id">
                </el-table-column>
                <el-table-column prop="visitTime" label="访问时间">
                </el-table-column>
                <el-table-column prop="username" label="访问用户">
                </el-table-column>
                <el-table-column prop="ip" label="访问IP">
                </el-table-column>
                <el-table-column prop="url" label="资源Url">
                </el-table-column>
                <el-table-column prop="executionTime" label="执行时间">
                </el-table-column>
                <el-table-column prop="className" label="访问方法所在类">
                </el-table-column>
                <el-table-column prop="methodName" label="访问方法">
                </el-table-column>
            </el-table>
            <div class="block" style="width: 100vw;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
                </el-pagination>
            </div>
        </el-row>
    </div>
</body>
<script>
    var obj = {
        page: 1,
        limit: 5,
        username: "",
        url: ""
    }
    var v1 = new Vue({
        el: "#app",
        data: {
            tableData: [{
                id: 1
            }],
            username: "",
            url: "",
            count: 100,
            currentPage: 1,
            pageSize: 5,
        },
        methods: {
            // 切换分页调用方法
            handleSizeChange(val) {
                //获取切换后的分页数val 
                //切换分页后应该从第一页开始查询
                // 向后台发送请求获取新的数据
                this.currentPage = 1;
                this.pageSize = val;
                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.username = this.username;
                obj.url = this.url;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            // 当跳转指定页面时调用的方法
            handleCurrentChange(val) {
                //获取跳转的页码val
                //获取当前分页数this.pageSize
                // 向后台发送请求获取新的数据
                this.currentPage = val;
                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.username = this.username;
                obj.url = this.url;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            selectLike() {
                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.username = this.username;
                obj.url = this.url;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            }
        }
    })

    function getData(obj) {
        //发送异步请求访问第一页数据
        axios({
            // 请求方式
            method: 'get',
            url: '/product/json',
            // 传递参数 data使用流发送数据 params台servlet可以直接获取
            params: obj,
            //响应的数据格式 默认就是json 可以省略
            responseType: 'json'
        }).then(response => {
            // 请求成功
            let res = response.data;
            console.log(res);
            v1.tableData = res.list;
            v1.count = res.total;
        }).catch(error => {
            // 请求失败，
            console.log(error);
            // 一般不用
        });
    }
    getData(obj);
</script>

</html>